<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="250px" style="height:100%;background-color: #FFF;position:fixed;z-index:99">
      <img :src="newsLogo"/>
      <el-menu :default-openeds="['1', '3']" router :default-active="currentMenu" unique-opened
               style="margin-top:-36px" @select="handleChooseMenu">
        <el-menu-item index="/index/message" style="position: relative;">
          <i class="el-icon-menu"></i>
          <span slot="title">消息列表</span>
          <el-badge :value="newsNum" :max="99" class="item newContainer" :hidden="newsNum<=0">
          </el-badge>
        </el-menu-item>
        <el-menu-item index="/index/goodList">
          <i class="el-icon-setting"></i>
          <span slot="title">商品列表</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container style="min-width:1170px;margin-left:250px">
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command="handleCommand">
          <img class="userLogoStyle" :src="userLogo"/>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span style="font-size:16px">{{userInfo.userName}}</span>
      </el-header>

      <el-main>
        <div class="mainContainer">
          <router-view></router-view>
        </div>
      </el-main>

      <el-footer class="el-footer" style="color: #fff;">2019 © chenbailin 版权所有</el-footer>
    </el-container>
  </el-container>
</template>

<script>
  import Vue from 'vue'
  import userLogo from '../assets/user.png'
  import newsLogo from '../assets/newLogo.png'
  import {
    Container,
    Aside,
    Header,
    Menu,
    MenuItemGroup,
    MenuItem,
    Submenu,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Main,
    Table,
    TableColumn,
    Footer,
    MessageBox,
    Badge
  } from 'element-ui'

  Vue.component(Container.name, Container)
  Vue.component(Aside.name, Aside)
  Vue.component(Main.name, Main)
  Vue.component(Header.name, Header)
  Vue.component(Menu.name, Menu)
  Vue.component(MenuItemGroup.name, MenuItemGroup)
  Vue.component(MenuItem.name, MenuItem)
  Vue.component(Submenu.name, Submenu)
  Vue.component(Dropdown.name, Dropdown)
  Vue.component(DropdownMenu.name, DropdownMenu)
  Vue.component(DropdownItem.name, DropdownItem)
  Vue.component(Table.name, Table)
  Vue.component(TableColumn.name, TableColumn)
  Vue.component(Footer.name, Footer)
  Vue.component(Badge.name, Badge)
  export default {
    name: 'App',
    data () {
      return {
        userLogo: userLogo,
        newsLogo: newsLogo
      }
    },
    computed: {
      userInfo: function () {
        return this.$store.getters.getUserInfo
      },
      currentMenu: function () {
        return this.$store.getters.getCurrentMenu
      },
      newsNum: function () {
        return this.$store.getters.getNewsNum
      }
    },
    methods: {
      /**
       * 处理下拉菜单command事件
       */
      handleCommand (command) {
        switch (command) {
          case 'logout':
            this.handleLogout()
            break
          default:
            break
        }
      },

      /**
       * 处理退出系统事件
       */
      handleLogout () {
        MessageBox.confirm('此操作将退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
        })
      },

      /**
       * 处理选择菜单事件
       * @param index
       */
      handleChooseMenu (index) {
        this.$store.dispatch('setCurrentMenu', index)
      }
    }
  }
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    font-size: 16px;
  }

  .el-main {
    background: #eee;
  }

  .el-aside {
    color: #333;
  }

  .mainContainer {
    height: 100%;
    padding: 20px;
    background: #fff;
  }

  .userLogoStyle {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }

  .newContainer {
    position: absolute;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 12px;
    display: inline-block;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    left: 160px;
    top: 4px;
  }
</style>
